<template>
  <aside class="filter">
    <h2 class="filter__title">Фильтры</h2>

    <form class="filter__form form" action="#" method="get">
      <fieldset class="form__block">
        <legend class="form__legend">Цена</legend>
        <label class="form__label form__label--price">
          <input
              class="form__input"
              type="text"
              name="min-price"
              v-model.number="currentPriceFrom"
          >
          <span class="form__value">От</span>
        </label>
        <label class="form__label form__label--price">
          <input
              class="form__input"
              type="text"
              name="max-price"
              v-model.number="currentPriceTo"
          >
          <span class="form__value">До</span>
        </label>
      </fieldset>

      <fieldset class="form__block">
        <legend class="form__legend">Категория</legend>
        <label class="form__label form__label--select">
          <select
              class="form__select"
              name="category"
              v-model.number="currentCategoryId"
          >
            <option value="0">Все категории</option>
            <option
                :value="category.id"
                v-for="category in categoryList"
                :key="category.id"
            >{{ category.title }}
            </option>
          </select>
        </label>
      </fieldset>

      <fieldset class="form__block">
        <legend class="form__legend">Цвет</legend>
        <ul class="colors">
          <li
              class="colors__item"
              v-for="color in colorsData"
              :key="color.id"
          >
            <label class="colors__label">
              <input
                  class="colors__radio sr-only"
                  type="radio"
                  name="color"
                  :value="color.id"
                  v-model="currentColor"
              >
              <span
                  class="colors__value"
                  :style="`background-color: ${color.code};`"
              >
                  </span>
            </label>
          </li>
        </ul>
      </fieldset>

      <fieldset class="form__block">
        <legend class="form__legend">Объемб в ГБ</legend>
        <ul class="check-list">
          <li class="check-list__item">
            <label class="check-list__label">
              <input class="check-list__check sr-only" type="checkbox" name="volume" value="8" checked="">
              <span class="check-list__desc">
                    8
                    <span>(313)</span>
                  </span>
            </label>
          </li>
          <li class="check-list__item">
            <label class="check-list__label">
              <input class="check-list__check sr-only" type="checkbox" name="volume" value="16">
              <span class="check-list__desc">
                    16
                    <span>(461)</span>
                  </span>
            </label>
          </li>
          <li class="check-list__item">
            <label class="check-list__label">
              <input class="check-list__check sr-only" type="checkbox" name="volume" value="32">
              <span class="check-list__desc">
                    32
                    <span>(313)</span>
                  </span>
            </label>
          </li>
          <li class="check-list__item">
            <label class="check-list__label">
              <input class="check-list__check sr-only" type="checkbox" name="volume" value="64">
              <span class="check-list__desc">
                    64
                    <span>(313)</span>
                  </span>
            </label>
          </li>
          <li class="check-list__item">
            <label class="check-list__label">
              <input class="check-list__check sr-only" type="checkbox" name="volume" value="128">
              <span class="check-list__desc">
                    128
                    <span>(313)</span>
                  </span>
            </label>
          </li>
          <li class="check-list__item">
            <label class="check-list__label">
              <input class="check-list__check sr-only" type="checkbox" name="volume" value="264">
              <span class="check-list__desc">
                    264
                    <span>(313)</span>
                  </span>
            </label>
          </li>
        </ul>
      </fieldset>

      <button
          class="filter__submit button button--primery"
          type="submit"
          @click.prevent="submitFilter"
      >
        Применить
      </button>
      <button
          class="filter__reset button button--second"
          type="button"
          @click.prevent="resetFilter"
      >
        Сбросить
      </button>
    </form>
  </aside>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ProductFilter',

  props: ['priceFrom', 'priceTo', 'categoryId', 'selectColor'],

  data() {
    return {
      currentPriceFrom:  0,
      currentPriceTo:    0,
      currentCategoryId: 0,
      currentColor:      '',

      categoriesData: null,
      colorsData:     null,
    }
  },

  created() {
    this.loadCategories()
    this.loadColors()
  },

  computed: {
    categoryList() {
      return this.categoriesData ? this.categoriesData.items : []
    },

    colorList() {
      return this.selectColor ? this.selectColor : []
    },
  },

  watch: {
    priceFrom(value) {
      this.currentPriceFrom = value
    },

    priceTo(value) {
      this.currentPriceTo = value
    },

    categoryId(value) {
      this.currentCategoryId = value
    },

    selectColor(value) {
      this.currentColor = value
    },
  },

  methods: {
    submitFilter() {
      this.$emit('update:priceFrom', this.currentPriceFrom)
      this.$emit('update:priceTo', this.currentPriceTo)
      this.$emit('update:categoryId', this.currentCategoryId)
      this.$emit('update:selectColor', this.currentColor)
      this.$emit('pageOne', 1)
    },

    resetFilter() {
      this.$emit('update:priceFrom', 0)
      this.$emit('update:priceTo', 0)
      this.$emit('update:categoryId', 0)
      this.$emit('update:selectColor', '')
    },

    loadCategories() {
      axios.get(`${this.API_BASE_URL}/api/productCategories`)
           .then(res => this.categoriesData = res.data)
           .catch(err => console.log('loadCategories -> ', err))
    },

    loadColors() {
      axios.get(`${this.API_BASE_URL}/api/colors`)
           .then(res => this.colorsData = res.data.items)
           .catch(err => console.log('loadColors -> ', err))
    },
  },
}
</script>

<style scoped>

</style>